<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>业务指标墙</title>
    <link rel="stylesheet" href="./static/css/index.css" />
    <link rel="stylesheet" href="./static/css/swiper-bundle.min.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="top">
        <img src="./static/img/title.png" alt="" />
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="blue_bg">
              <div class="section leftToPBox">
                <div class="text">路网</div>
                <div class="keyun_average leftTop_average"></div>
                <div class="unit">
                  客运线路强度<span>(万乘次/公里*日)</span>
                </div>
                <div class="sectionEchart keyun_chart"></div>
              </div>
              <div class="section leftCenterBox">
                <div class="text">路网</div>
                <div class="line_average"></div>
                <div class="unit">线路平均运距<span>(公里)</span></div>
                <div class="sectionEchart line_chart"></div>
              </div>
              <div class="section leftbottomBox">
                <div class="text" style="top: 13px">平均</div>
                <div class="yanwu_average" style="top: 8px"></div>
                <div class="unit">
                  五分钟延误事件频次<span>(万车公里/件)</span>
                </div>
                <div class="sectionEchart yanwu_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="leftCenter">
              <div class="zhengdian_rate">
                <div class="text">平均</div>
                <div class="zhengdian_average"></div>
                <div class="unit centerUnit">正点率<span>(月累计)</span></div>
                <div class="zhengdian_box"></div>
              </div>
              <div class="duixian_rate">
                <div class="text">平均</div>
                <div class="duixian_average"></div>
                <div class="unit centerUnit">兑现率<span>(月累计)</span></div>
                <div class="duixian_box"></div>
              </div>
              <div class="change">
                <div class="text" style="top: 13px">单日</div>
                <div class="change_average" style="top: 8px"></div>
                <div class="unit centerUnit">
                  票务收入变化趋势图<span>(万元)</span>
                </div>
                <div class="sectionEchart changeChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="center">
              <div class="shigong_duixian">
                <div class="text">最高</div>
                <div class="shigong_duixian_max"></div>
                <div class="unit centerUnit">
                  施工兑现率<span>(含临时)</span>
                </div>
                <div  class="sectionEchart shigongDChart"></div>
              </div>
              <div class="shigong_plan">
                <div class="text">最高</div>
                <div class="shigong_plan_max"></div>
                <div class="unit centerUnit">
                  施工计划工时利用率<span>(含临时)</span>
                </div>
                <div  class="sectionEchart shigongPChart"></div>
              </div>
              <div class="shigong_change">
                <div class="text">最高</div>
                <div class="shigong_change_max"></div>
                <div class="unit centerUnit">
                  施工变更率<span>(含临时)</span>
                </div>
                <div class="sectionEchart shigongCChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="right">
              <div class="jindu">
                <div class="text">平均</div>
                <div class="jindu_average"></div>
                <div class="unit">进度完成情况</div>
                <div class="sectionEchart jinduChart"></div>
              </div>
              <div class="zhiliang">
                <div class="text">平均</div>
                <div class="zhiliang_average">98%</div>
                <div class="unit">质量检查完成情况</div>
                <div class="sectionEchart zhiliangChart"></div>
              </div>
              <div class="touzi">
                <div class="text">平均</div>
                <div class="touzi_average">59.45%</div>
                <div class="unit">投资完成率</div>
                <div class="sectionEchart touziChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="leftToPBox">
                <div class="text">最高</div>
                <div class="lineStationNum_max leftTop_average"></div>
                <div class="unit">线路车站数</div>
                <div
                  class="sectionEchart lineStationNum_chart"
                ></div>
              </div>
              <div class="leftCenterBox">
                <div class="text textMore">日最均高</div>
                <div class="linePassengerV_max"></div>
                <div class="unit">线路客运量<span>(万乘次/日)</span></div>
                <div id="linePassengerVChart" class="linePassengerVChart"></div>
              </div>
              <div class="heightSetionflow">
                <div class="text">最高</div>
                <div class="heightSetionflow_max"></div>
                <div class="unit">
                  高峰小时高断面客流量<span>(万人次/h)</span>
                </div>
                <div class="heightSetionflow_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="peakMaxCongest">
                <div class="text textMore" style="width: 38px">上季度平均</div>
                <div class="peakMaxCongest_average"></div>
                <div class="unit centerUnit">
                  高峰小时最大拥挤度<span>(%)</span>
                </div>
                <div class="peakMaxCongest_chart"></div>
              </div>
              <div class="averageDailyPassNum">
                <div class="text">最高</div>
                <div class="averageDailyPassNum_max"></div>
                <div class="unit centerUnit">
                  日均客运周转量<span>(万乘次公里/日)</span>
                </div>
                <div class="averageDailyPassNum_chart"></div>
              </div>
              <div class="averageDailyOpera">
                <div class="text">最高</div>
                <div class="averageDailyOpera_max"></div>
                <div class="unit centerUnit">日均运营里程</div>
                <div class="averageDailyOpera_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="lineVehiclesNum">
                <div class="text textMore">上车线辆</div>
                <div class="lineVehiclesNum_num"></div>
                <div class="unit centerUnit">线路车辆数<span>(列)</span></div>
                <div class="lineVehiclesNum_chart"></div>
              </div>
              <div class="additionalTrains">
                <div class="text">最高</div>
                <div class="additionalTrains_max"></div>
                <div class="unit centerUnit">加开列次</div>
                <div class="additionalTrains_chart"></div>
              </div>
              <div class="totalMileage">
                <div class="text">最高</div>
                <div class="totalMileage_max"></div>
                <div class="unit centerUnit">
                  总行驶里程<span>(万车公里)</span>
                </div>
                <div class="totalMileage_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="trainNumber">
                <div class="text textMore">实最际高</div>
                <div class="trainNumber_average"></div>
                <div class="unit">开行列次</div>
                <div class="trainNumber_chart"></div>
              </div>
              <div class="numLineVehicles">
                <div class="text textMore">上车线辆</div>
                <div class="numLineVehicles_num"></div>
                <div class="unit">线路车辆数<span>(辆)</span></div>
                <div class="numLineVehicles_chart"></div>
              </div>
              <div class="onTimeTrain">
                <div class="text">最高</div>
                <div class="onTimeTrain_max"></div>
                <div class="unit">准点列车次数</div>
                <div class="onTimeTrain_chart"></div>
              </div>
            </div>
          </div>
          <!-- <div class="swiper-slide">
            <div class="purple_bg">
              <div class="leftToPBox">
                <div class="text textMore">最占高比</div>
                <div class="titleValue lineStationNum_max leftTop_average">38.79%</div>
                <div class="unit">票卡分类统计<span>(万次/月)</span></div>
                <div id="keyun_chart" class="leftToPChart ticketCardSChart"></div>
              </div>
              <div class="leftCenterBox">
                <div class="text">总共</div>
                <div class="titleValue lineDelay_total"></div>
                <div class="unit">线路延误事件数</div>
                <div id="linePassengerVChart" class="linePassengerVChart"></div>
              </div>
              <div class="heightSetionflow">
                <div class="text">总共</div>
                <div class="titleValue passengerClearanceTimes_total"></div>
                <div class="unit">
                  线路清客次数<span>(列次)</span>
                </div>
                <div class="heightSetionflow_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="peakMaxCongest">
                <div class="text textMore">线路条数</div>
                <div class="titleValue peakMaxCongest_average"></div>
                <div class="unit centerUnit">
                  运营规模
                </div>
                <div class="peakMaxCongest_chart"></div>
              </div>
              <div class="averageDailyPassNum">
                <div class="text">总长</div>
                <div class="titleValue lineOperationLength_totalLength"></div>
                <div class="unit centerUnit">
                 线路运营长度
                </div>
                <div class="averageDailyPassNum_chart"></div>
              </div>
              <div class="averageDailyOpera">
                <div class="text">最高</div>
                <div class="titleValue averageDailyOpera_max">1329.35</div>
                <div class="unit centerUnit">网络最高日客运量<span>(万乘次/日)</span></div>
                <div class="averageDailyOpera_chart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="lineVehiclesNum">
                <div class="text">最高</div>
                <div class="titleValue lineVehiclesNum_num">622.53</div>
                <div class="unit centerUnit">网络日均出行量<span>(列)</span></div>
                <div class="lineVehiclesNum_chart"></div>
              </div>
              <div class="additionalTrains">
                <div class="text">平均</div>
                <div class="titleValue networkTravelVolume_avg"></div>
                <div class="unit centerUnit">网络出行量比重<span>(%)</span></div>
                <div class="additionalTrains_chart"></div>
              </div>
              <div class="totalMileage">
                <div class="text">最高</div>
                <div class="titleValue stationHighest_max">79.86</div>
                <div class="unit centerUnit">
                  车站最高日客运量<span>(万乘次/日)</span>
                </div>
                <div class="stationHighestDayChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="trainNumber">
                <div class="text">总量</div>
                <div class="titleValue modelingScale_total"></div>
                <div class="unit">建设规模<span>(km)</span></div>
                <div class="trainNumber_chart"></div>
              </div>
              <div class="numLineVehicles">
                <div class="text">平均</div>
                <div class="titleValue preliminaryWork_avg"></div>
                <div class="unit">前期工作完成率</div>
                <div class="numLineVehicles_chart"></div>
              </div>
              <div class="onTimeTrain">
                <div class="text">最低</div>
                <div class="titleValue electromechanicalSystem_min"></div>
                <div class="unit">机电系统工程合格率</div>
                <div class="onTimeTrain_chart"></div>
              </div>
            </div>
          </div> -->

          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="section leftToPBox">
                <div class="text textMore">最占高比</div>
                <div class="titleValue ticketCard_max leftTop_average">38.79%</div>
                <div class="unit">票卡分类统计<span>(万次/月)</span></div>
                <div class="sectionEchart ticketCardSChart"></div>
              </div>
              <div class="section leftCenterBox">
                <div class="text">总共</div>
                <div class="titleValue lineDelay_total"></div>
                <div class="unit">线路延误事件数</div>
                <div class="sectionEchart lineDelayChart"></div>
              </div>
              <div class="section heightSetionflow">
                <div class="text">总共</div>
                <div class="titleValue passengerClearanceTimes_total"></div>
                <div class="unit">
                  线路清客次数<span>(列次)</span>
                </div>
                <div class="sectionEchart passengerClearanceTimesChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="section peakMaxCongest">
                <div class="text textMore">线路条数</div>
                <div class="titleValue operationScale_average"></div>
                <div class="unit centerUnit">
                  运营规模
                </div>
                <div class="sectionEchart operationScaleChart"></div>
              </div>
              <div class="section averageDailyPassNum">
                <div class="text">总长</div>
                <div class="titleValue lineOperationLength_totalLength"></div>
                <div class="unit centerUnit">
                 线路运营长度
                </div>
                <div class="sectionEchart lineOperationLengthChart"></div>
              </div>
              <div class="section averageDailyOpera">
                <div class="text">最高</div>
                <div class="titleValue networkMaxdailyPas_max">1329.35</div>
                <div class="unit centerUnit">网络最高日客运量<span>(万乘次/日)</span></div>
                <div class="sectionEchart networkMaxdailyPasChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="purple_bg">
              <div class="section lineVehiclesNum">
                <div class="text">最高</div>
                <div class="titleValue lineVehiclesNum_num">622.53</div>
                <div class="unit centerUnit">网络日均出行量<span>(列)</span></div>
                <div class="sectionEchart networkDailyTravelNumChart"></div>
              </div>
              <div class="section  additionalTrains">
                <div class="text">平均</div>
                <div class="titleValue networkTravelVolume_avg"></div>
                <div class="unit centerUnit">网络出行量比重<span>(%)</span></div>
                <div class="sectionEchart networkTravelVolumeChart"></div>
              </div>
              <div class="section totalMileage">
                <div class="text">最高</div>
                <div class="titleValue totalMileage_max">79.86</div>
                <div class="unit centerUnit">
                  车站最高日客运量<span>(万乘次/日)</span>
                </div>
                <div class="sectionEchart stationHighestChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="yellow_bg">
              <div class="section trainNumber">
                <div class="text">总量</div>
                <div class="titleValue modelingScale_total"></div>
                <div class="unit">建设规模<span>(km)</span></div>
                <div class="sectionEchart modelingScaleChart"></div>
              </div>
              <div class="section numLineVehicles">
                <div class="text">平均</div>
                <div class="titleValue preliminaryWork_avg"></div>
                <div class="unit">前期工作完成率</div>
                <div class="sectionEchart preliminaryWorkChart"></div>
              </div>
              <div class="section onTimeTrain">
                <div class="text">最低</div>
                <div class="titleValue electromechanicalSystem_min"></div>
                <div class="unit">机电系统工程合格率</div>
                <div class="sectionEchart electromechanicalSystemChart"></div>
              </div>
            </div>
          </div>



          <!-- <div class="swiper-slide">
            <div class="left">
              <div class="fare">
                <div class="text">平均</div>
                <div class="fare_average"></div>
                <div class="unit">平均票价<span>(元)</span></div>
                <div id="fare_chart" class="fare_chart"></div>
              </div>
              <div class="productivity">
                <div class="text">平均</div>
                <div class="productivity_average"></div>
                <div class="unit">全员生产率</div>
                <div id="productivity_chart" class="productivity_chart"></div>
              </div>
              <div class="departureInterval">
                <div class="text" style="top: 13px">最长</div>
                <div class="departureInterval_average" style="top: 8px"></div>
                <div class="unit">高峰小时最小发车间隔<span>(秒)</span></div>
                <div
                  id="departureInterval_chart"
                  class="departureInterval_chart"
                ></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="leftCenter">
              <div class="passengerVolume">
                <div class="text">平均</div>
                <div class="passengerVolume_average">43.21</div>
                <div class="unit centerUnit">
                  日均客流量<span>(万乘次/日)</span>
                </div>
                <div id="passengerVolume_chart"></div>
              </div>
              <div class="reliability">
                <div class="text">平均</div>
                <div class="reliability_average">9.89</div>
                <div class="unit centerUnit">
                  列车运行可靠度<span>(万列公里/件)</span>
                </div>
                <div id="reliability_chart"></div>
              </div>
              <div class="vehicleOnlineRate">
                <div class="text" style="top: 13px">平均</div>
                <div class="vehicleOnlineRate_average" style="top: 8px">
                  76%
                </div>
                <div class="unit centerUnit">列车上线率</div>
                <div id="vehicleOnlineRateChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="center">
              <div class="constructionStandard">
                <div class="text">最高</div>
                <div class="constructionStandard_average"></div>
                <div class="unit centerUnit">
                  施工规范率<span>(含临时)</span>
                </div>
                <div
                  id="constructionStandardChart"
                  class="constructionStandard_chart"
                ></div>
              </div>
              <div class="vehicleAvailability">
                <div class="text">平均</div>
                <div class="vehicleAvailability_average">50%</div>
                <div class="unit centerUnit">列车可用率</div>
                <div id="vehicleAvailabilityChart"></div>
              </div>
              <div class="allocatedVehiclesNum">
                <div class="text">最多</div>
                <div class="allocatedVehiclesNum_max">60</div>
                <div class="unit centerUnit">配属车辆数<span>(辆)</span></div>
                <div id="allocatedVehiclesNumChart"></div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="right">
              <div class="civilEngineeringComple">
                <div class="text textMore">实最际低</div>
                <div class="civilEngineeringComple_min">77.12%</div>
                <div class="unit">土建工程完成率</div>
                <div id="civilEngineeringCompleChart"></div>
              </div>
              <div class="installationDebug">
                <div class="text">最高</div>
                <div class="installationDebug_max">90.28%</div>
                <div class="unit">机电安装调试完成率</div>
                <div id="installationDebugChart"></div>
              </div>
              <div class="qualifiedCivilEngine">
                <div class="text">最低</div>
                <div class="qualifiedCivilEngine_min">100%</div>
                <div class="unit">土建工程合格率</div>
                <div id="qualifiedCivilEngineChart"></div>
              </div>
            </div>
          </div> -->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- <script src="https://unpkg.com/dayjs@1.8.34/dayjs.min.js"></script> -->
    <script src="./static/js/jquery-3.4.1.min.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/echarts-liquidfill.js"></script>
    <script src="./static/js/const_config.js"></script>
    <script src="./static/js/dayjs.min.js"></script>
    <script src="./static/js/index.js"></script>
    <script src="./static/js/indexSecond.js"></script>
    <script src="./static/js/swiper-bundle.min.js"></script>
    <script src="./static/js/indexThree.js"></script>
    <script src="./static/js/indexFour.js"></script>
    <script src="./static/js/indexOther.js"></script>
    <script>
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // autoplay: {
        //   delay: 5000,
        //   disableOnInteraction: false,
        // },
      });
    </script>
  </body>
</html>
